<template>
    <div class="my-tag">
        <span :class="isDefault ? 'is-default' :'no-default'">
            <slot></slot>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        isDefault:{
            type:Boolean,
            default:true,
        },
        text:{
            type:String,
            default:'',
        }
    },
    data () {
        return {

        }
    },
    computed: {

    },
    methods: {

    },
    mounted: function() {
        
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .my-tag{
        display: inline-block;
        margin-right: 6px;
        .is-default{
            font-size: 12px;
            background-color: #edeef4;
            padding: 4px 6px;
        }
        .no-default{
            font-size: 12px;
            background-color: #dae2ff;
            color: #3b68ff;
            padding: 4px 6px;
        }
    }

</style>
